<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				color: white;
			}
			
			header {
				position: fixed;
				width: 100%;
				text-align: center;
				z-index: 9;
			}
			
			section {
				width: 100%;
				background-color: #E2353A;
				z-index: 2;
			}
			
			section nav {
				align-self: center;
				width: 100%;
				height: 100%;
				position: relative;
				overflow: hidden;
			}
			
			header img:nth-child(1) {
				position: absolute;
			}
			
			.textContent {
				background-color: #DBDBDD;
				box-sizing: border-box;
				padding: 100% 20px;
				transition: all 2s;
				overflow-y: scroll;
				border: 2px solid green;
				font-size: 15px;
			}
			
			.wish {
				position: fixed;
				bottom: 10%;
				width: 100%;
				z-index: 101;
			}
			
			footer {
				position: fixed;
				bottom: 0;
				width: 100%;
				z-index: 3;
			}
			
			.snow div{
				transition: all 1.5s;
				font-weight: bold;
				font-family: monospace;
			}
		</style>
		<!--字体效果-->
		<style>
			body .textcontainer {
				padding: 40px 0;
				text-align: center;
			}
			
			body .title {
				text-align: center;
				position: relative;
			}
			
			body .title.bubbles>.particle {
				opacity: 0;
				position: absolute;
				background-color: white;
				-webkit-animation: bubbles 3s ease-in infinite;
				animation: bubbles 3s ease-in infinite;
				border-radius: 100%;
			}
			
			@keyframes bubbles {
				0% {
					opacity: 0;
				}
				20% {
					opacity: 1;
					-webkit-transform: translate(0, -20%);
					transform: translate(0, -20%);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate(0, -1000%);
					transform: translate(0, -1000%);
				}
			}
		</style>
	</head>

	<body>
		<header>
			<img src="images/leaves.png" width="100%" />
			<img src="images/top.png" width="200%" />
			<h3 class="bubbles title">Happy New Year</h3>
		</header>
		<section>
			<nav class="snow" id="snow">
				<div class="textContent"></div>
				<div class="wish" align="center" hidden="hidden">&gt;&gt;&gt;&gt;&gt;祝福生效&lt;&lt;&lt;&lt;&lt;</div>
				<iframe src="star.html" width="100%" height="100%" style="position: fixed;z-index: 9;"></iframe>
				<audio src="audio/rain.mp3" autoplay="autoplay" loop="loop"></audio>
			</nav>
		</section>
		<footer>
			<img src="images/leaves.png" width="100%" />
		</footer>
		<script type="text/javascript">
			function getStyle(ele) {
				var style = null;
				if(window.getComputedStyle) {
					style = window.getComputedStyle(ele, null);
				} else {
					style = ele.currentStyle;
				}
				return style;
			}
			var heightW = window.screen.availHeight;
			var widthW = window.screen.availWidth;
			var section = document.querySelector("section");
			section.style.backgroundColor = "red";
			console.log(heightW);
			section.style.cssText = "height:" + heightW + "px";
			console.log(getStyle(section).height);
		</script>
		<script src="js/snow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var snowS = document.getElementById("snowS");

			function Birthday() {
				this.author = "stone";
				this.audio = function() {
					var audio = document.createElement('audio');
					audio.id = "audio";
					audio.loop = "loop";
					audio.autoplay = "autoplay";
					var source = document.createElement('source');
					source.src = 'audio/rain.mp3';
					source.setAttribute('type', 'audio/mpeg');
					audio.appendChild(source);
					document.querySelector("section").append(audio);
					setTimeout(function() {
						console.log($("#audio").get(0));
						$("#audio").get(0).play();
					}, 300);
				}
				this.isPC = function() {
					var userAgentInfo = navigator.userAgent;
					var Agents = ["Android", "iPhone",
						"SymbianOS", "Windows Phone",
						"iPad", "iPod"
					];
					var flag = true;
					for(var v = 0; v < Agents.length; v++) {
						if(userAgentInfo.indexOf(Agents[v]) > 0) {
							flag = false;
							break;
						}
					}
					return flag;
				}
				this.fontShow = function(ele) {
					var font = $(ele).text();
					$(ele).text(""); //清空文本  为了填充处理后的文本
					var fontA = font.split("");
					console.log(font);
					//给每一个字体添加标签  方便操控
					for(var i = 0; i < fontA.length; i++) {
						var b = document.createElement("b");
						b.textContent = fontA[i];
						$(ele).append(b);
						b.style.opacity = "0";
						$(b).animate({
							"opacity": "1"
						}, 10 * i * 1)
					}

				}
				this.bubbles = function() {
					jQuery.rnd = function(m, n) {
						m = parseInt(m);
						n = parseInt(n);
						return Math.floor(Math.random() * (n - m + 1)) + m;
					}
					$.each($(".title.bubbles"), function() {
						var bubblecount = ($(this).width() / 50) * 10;
						for(var i = 0; i <= bubblecount; i++) {
							var size = ($.rnd(40, 80) / 10);
							$(this).append('<span class="particle" style="top:' + $.rnd(20, 80) + '%; left:' + $.rnd(0, 95) + '%;width:' +
								size + 'px; height:' + size + 'px;animation-delay: ' + ($.rnd(0, 30) / 10) + 's;"></span>');
						}
					});
				}
				this.fontUpdate = function() {
					var colors = ["#ff0000", "#b600ff", "#009fff", "#60ff00", "#f9ff00"];
					setInterval(function() {
						$(".snow div").css({
							"color": colors[Math.ceil(Math.random() * colors.length)]
						});
					}, 1000);
				}
				this.bjUpdate = function() {
					var colors = ["#435177", "#43776a", "#624377", "#86403a", "#d25b5b"]
					backTimer = setInterval(function() {
						$(".textContent").css("background-color", colors[Math.ceil(Math.random() * colors.length)]);
					}, 1000)
				}
				this.wish = function() {
					var wish = $(".wish");
					var flag = true;
					setInterval(function() {
						if(flag) {
							wish.fadeOut(300);
							flag = false;
						} else {
							wish.fadeIn(300);
							flag = true;
						}
					}, 600);
					$(".wish").click(function() {
						$(".textContent").css("padding", "0 20px").css("border", "none");
						clearInterval(backTimer);
						$(".wish").remove();
						bir.fontUpdate();
					})
				}
				this.adapt = function() {
					var snowS = document.createElement("script");
					if(this.isPC()) {
						var imgs = document.querySelectorAll("img");
						console.log();
						imgs.forEach(function(value, index, array) {
							value.remove();
						})
						snowS.src = "js/snow.js";
						document.body.appendChild(snowS);
					} else {
						var snowC = document.createElement("link");
						snowC.href = "css/snow3.css";
						document.head.appendChild(snowC)
						snowS.src = "js/websnowjq.js";
						document.body.appendChild(snowS);
						snowS.onload = function() {
							$("#snow").websnowjq();
						}
					}
				}
			}
			var bir = new Birthday();
			//标题气泡
			bir.bubbles();
			//背景变色
			bir.bjUpdate();
			//雪花适配
			bir.adapt();
			//信封自由下落
			var index = 0;

			function downMail() {
				section = document.querySelector("section");
				var mail = document.createElement("img");
				mail.className = "mail";
				mail.src = "images/mail.png";
				mail.width = "100";
				mail.style.cssText = "position: absolute;left: " + Math.ceil(Math.random() * (window.screen.availWidth - mail.width)) + "px;top:0;z-index:100";
				section.appendChild(mail);
				mails = section.querySelectorAll("img");
				mails[index].addEventListener("click", clickMail($(mails[index])));
				var speed = 1;
				var mailH = mails[0].offsetWidth;
				var timer = setInterval(function() {
					mails[index].style.top = speed + "px";
					speed += 5;
					if(bir.isPC()) {
						if(speed >= mailH * (index + 1) + 300) {
							clearInterval(timer);
							index++;
							if(index <= 4) {
								downMail();
							}
						}
					} else if(speed >= mailH * (index + 1)) {
						clearInterval(timer);
						index++;
						if(index <= 4) {
							downMail();
						}
					}
				}, 10)
			}

			function clickMail(ele) {
				var clickFlag = false;
				ele.click(function() {
					if(clickFlag) {
						return;
					}
					console.log(ele.index());
					ele.css({
						"transition": "all 1s",
						"position": "absolute",
						"top": "30%",
						"left": window.screen.availWidth / 2 - (ele.width() / 2) + "px",
						"transform": "scale(2.0)",
						"z-index": "100"
					});
					setTimeout(function() {
						console.log(ele.attr("src", "images/mailOpen.png"));
						setTimeout(function() {
							readMail(ele.index());
						}, 300)
					}, 1000)
					clickFlag = true;
				})
			}
			var removeIndex = 0;
			var distance = 13;

			function readMail(index) {
				$.ajax({
					type: "get",
					url: "json/wish.json",
					success: function(data) {
						console.log(data);
						console.log(index);
						$(mails[index - 1]).css("display", "none");
						removeIndex++;
						var paper = document.createElement("div");
						paper.style.cssText = "background-color: white;width: 100%; height:15%;margin: auto;padding: 0 15px;background-color:transparent;display: flex;" +
							"justify-content: center;align-items: center;box-sizing: border-box; position:absolute;top:" + distance + "%;z-index:99";
						paper.textContent = data.wishs[index - 1];
						var section = document.querySelector(".snow");
						section.appendChild(paper);
						distance += 13;
						console.log(removeIndex);
						if(removeIndex >= 5) {
							bir.wish();
						}
					}
				});
			}
			downMail();
			console.log(window.screen.availWidth);
		</script>
		<script src="js/checkLogin.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>